{% extends "./inc_base.html" %}

{% block content %}

<!-- -->
<section>
    <div class="container">

        <div class="row">

            <!-- LEFT -->

            <div class="col-md-9 col-sm-9">
                <!--
                                            controlls-over		= navigation buttons over the image
                                            buttons-autohide 	= navigation buttons visible on mouse hover only

                                            data-plugin-options:
                                                "singleItem": true
                                                "autoPlay": true (or ms. eg: 4000)
                                                "navigation": true
                                                "pagination": true
                                                "transitionStyle":"fadeUp" (fade,backSlide,goDown,fadeUp)
                                        -->
                <div class="owl-carousel buttons-autohide controlls-over" data-plugin-options='{"singleItem": true, "autoPlay": true, "navigation": true, "pagination": true, "transitionStyle":"fade"}'>
                    {% topic data = "slider",limit= "5",cid=category.id,position='2',issub="1",ispic="1"%}
                    {% for v in slider%}
                    <a href="{{v.name|get_url(v.id)}}">
                        <img class="img-responsive" src="{{v.cover_id|get_pic('m=1,w=848,h=300')}}" alt="{{v.title}}">
                    </a>
                    {%endfor%}
                </div>
                <div class="panel panel-default tabs">
                    <div class="panel-heading">
                        <ul class="nav nav-tabs">
                            <!-- side navigation -->
                            {%column data="cates",cid=category.id%}
                            <li class="active"><a href="#taball" data-toggle="tab">全部</a></li>
                            {%for val in cates%}
                            <li ><a href="#tab{{val.id}}" data-toggle="tab">{{val.name}}</a></li>
                            {%endfor%}

                        </ul>
                    </div>
                    <div class="panel-body">
                        <div class="tab-content nopadding">
                            <div class="tab-pane fade in active" id="taball">
                                {% topic data = "list",limit= "10",cid=category.id,issub=1%}
                                {% for val in list %}
                                {% set categoryname = val.category_id|get_cate %}
                                <!-- POST ITEM -->
                                <div class="blog-post-item padding-bottom-20 margin-bottom-20 clearfix">

                                    <!-- IMAGE -->
                                    {% if val.cover_id>0 %}
                                    <figure class="blog-item-small-image margin-bottom-0">
                                        <img class="img-responsive" src="{{val.cover_id|get_pic('m=1,w=200,h=120')}}" alt="">
                                    </figure>
                                    {% endif %}
                                    <div class="blog-item-small-content">
                                        <h2><a href="{{val.name|get_url(val.id)}}" target="_blank" title="{{val.title}}">{{val.title}}</a></h2>

                                        <ul class="blog-post-info list-inline padding-bottom-10">
                                            <li>
                                                <a href="#">
                                                    <i class="fa fa-clock-o"></i>
                                                    <span class="font-lato">{{val.update_time|dateformat('Y-m-d H:i')}}</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <i class="fa fa-comment-o"></i>
                                                    <span class="font-lato">{{val.view}} </span>
                                                </a>
                                            </li>
                                            <li>
                                                <i class="fa fa-folder-open-o"></i>

                                                <a class="category" href="{{categoryname.url}}">
                                                    <span class="font-lato">{{categoryname.name}}</span>
                                                </a>
                                                {#
                                                <a class="category" href="#">
                                                    <span class="font-lato">Photography</span>
                                                </a>
                                                #}
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <i class="fa fa-user"></i>
                                                    <span class="font-lato">{{val.uid|get_nickname}}</span>
                                                </a>
                                            </li>
                                        </ul>

                                        <p>{{val.description|truncate(90, true, "...")}}</p>
                                    </div>

                                </div>
                                <!-- /POST ITEM -->
                                {%endfor%}

                            </div>

                            {%for v in cates%}
                            <div class="tab-pane fade  " id="tab{{v.id}}">
                                {% topic data = "list",limit= "10",cid=v.id%}
                                {% for val in list %}
                                {% set categoryname = val.category_id|get_cate %}
                                <!-- POST ITEM -->
                                <div class="blog-post-item padding-bottom-20 margin-bottom-20 clearfix">

                                    <!-- IMAGE -->
                                    {% if val.cover_id>0 %}
                                    <figure class="blog-item-small-image margin-bottom-0">
                                        <img class="img-responsive" src="{{val.cover_id|get_pic('m=1,w=200,h=120')}}" alt="">
                                    </figure>
                                    {% endif %}
                                    <div class="blog-item-small-content">
                                        <h2><a href="{{val.name|get_url(val.id)}}">{{val.title}}</a></h2>

                                        <ul class="blog-post-info list-inline padding-bottom-10">
                                            <li>
                                                <a href="#">
                                                    <i class="fa fa-clock-o"></i>
                                                    <span class="font-lato">{{val.update_time|dateformat('Y-m-d H:i')}}</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <i class="fa fa-comment-o"></i>
                                                    <span class="font-lato">{{val.view}}</span>
                                                </a>
                                            </li>
                                            <li>
                                                <i class="fa fa-folder-open-o"></i>

                                                <a class="category" href="{{categoryname.url}}">
                                                    <span class="font-lato">{{categoryname.name}}</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                    <i class="fa fa-user"></i>
                                                    <span class="font-lato">{{val.uid|get_nickname}}</span>
                                                </a>
                                            </li>
                                        </ul>

                                        <p>{{val.description|truncate(90, true, "...")}}</p>
                                    </div>

                                </div>
                                <!-- /POST ITEM -->
                                {%endfor%}
                                <!-- PAGINATION -->
                                <div class="text-center">
                                    <a href="{{v.url}}" class="btn btn-reveal btn-default">
                                        <i class="fa fa-plus"></i>
                                        <span>查看全部内容</span>
                                    </a>
                                </div>
                                <!-- /PAGINATION -->
                            </div>
                            {%endfor%}

                        </div>
                    </div>
                </div>




            </div>
            <!-- RIGHT -->


            {% include "./inc_right.html"%}
        </div>


    </div>
</section>
<!-- / -->
{% endblock %}
